<script setup>
import { ref } from "vue";
import { imgUrl } from "../../../utils/global";

const formRef = ref(null);

const genderType = [
    { label: "女", value: 0 },
    { label: "男", value: 1 },
];

const licenseType = [{ label: "居民身份证", value: 0 }];

const formData = ref({
    name: "",
    phone: "",
    license_type: 0,
    license_number: "",
    date: [null, null, null]
});

const validRules = {
    name: {
        rules: [{ required: true, message: "姓名不能为空" }],
    },
    phone: {
        rules: [
            { required: true, message: "手机号不能为空" },
            { pattern: /^1[3456789]\d{9}$/, message: "手机号格式不正确" },
        ],
    },
    license_number: {
        rules: [{ required: true, message: "证件号码不能为空" }],
    }
};

</script>

<template>
    <view class="app-intention">
        <text class="app-title">体检人信息</text>
        <view class="app-tip">
            <text>请务必如实填写体检人信息，否则将影响正常到 店体检和报告查询。</text>
        </view>

        <uni-forms class="app-form" ref="formRef" v-model="formData">
            <view class="select-wrapper">
                <view class="select-left">
                    <view class="form-item">
                        <view class="form-label">
                            <text>*</text>
                            <text>体检人姓名：</text>
                        </view>
                        <view class="form-content">
                            <input v-model="formData.name" placeholder="请输入姓名" />
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">
                            <text>*</text>
                            <text>体检人手机：</text>
                        </view>
                        <view class="form-content">
                            <input v-model="formData.phone" placeholder="请输入手机" />
                        </view>
                    </view>
                </view>

                <view class="select-right">
                    <image :src="imgUrl('/static/img/imgs/male.png')" mode="aspectFill" />
                    <text>选择体检人</text>
                </view>
            </view>

            <view class="app-tip" style="margin-bottom: 79rpx;">
                <text>手机号用于接收检前提醒，报告出具查询等信息</text>
            </view>

            <view class="form-item">
                <view class="form-label">
                    <text>*</text>
                    <text>证件类型：</text>
                </view>
                <view class="form-content">
                    <radio-group>
                        <label>
                            <radio checked="true" color="white" activeBackgroundColor="#FF9000" />
                            居民身份证
                        </label>

                        <label>
                            <radio checked="false" color="white" activeBackgroundColor="#FF9000" />
                            其他证件
                        </label>
                    </radio-group>
                </view>
            </view>

            <view class="form-item">
                <view class="form-label">
                    <text>*</text>
                    <text>证件号码：</text>
                </view>
                <view class="form-content">
                    <input v-model="formData.license_number" placeholder="请输入证件号码" />
                </view>
            </view>

            <view class="form-item">
                <view class="form-label">
                    <text>*</text>
                    <text>意向日期1：</text>
                </view>
                <view class="form-content">
                    <uni-datetime-picker 
                        type="date" 
                        v-model="formData.date[0]" 
                        placeholder="请选择意向日期" 
                        :start="new Date().toISOString().split('T')[0]"
                    />
                </view>
            </view>

            <view class="form-item">
                <view class="form-label">
                    <text></text>
                    <text>意向日期2：</text>
                </view>
                <view class="form-content">
                    <uni-datetime-picker 
                        type="date" 
                        v-model="formData.date[1]" 
                        placeholder="请选择意向日期" 
                        :start="new Date().toISOString().split('T')[0]"
                    />
                </view>
            </view>

            <view class="form-item">
                <view class="form-label">
                    <text></text>
                    <text>意向日期3：</text>
                </view>
                <view class="form-content">
                    <uni-datetime-picker 
                        type="date" 
                        v-model="formData.date[2]" 
                        placeholder="请选择意向日期" 
                        :start="new Date().toISOString().split('T')[0]"
                    />
                </view>
            </view>
        </uni-forms>
        <view class="app-divide"></view>
        
        <view class="text-tip">意向日期1必填，以防日期预约爆满，建议填写多个意
            向日期。</view>

        <view class="confirm-button">
            <text>下一步</text>
        </view>
    </view>
</template>

<style src="./style.scss" scoped />
